/* eslint-disable */
import React, { Component } from 'react';
import "./index.scss";
import { connect } from "react-redux";
import { getIndexData, ratingStore, ratingEmp, callEmp, callEmpFinish, getGifts, getHotData } from "./../../actions";
// import StarRating from "./../../components/starRating/starRating";
import RatingStore from "./../../components/ratingStore/ratingStore";
import EmpDetail from "./../../components/empDetail/empDetail";
// import alertMessage from "./../../utils/alertMessage";
import { Carousel } from 'antd';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            doShowRatingStore: false,//是否显示评价网吧弹窗
            doShowEmpDetail: false,//是否显示员工详情弹窗
            nowSelEmp: {},//当前选择的员工
            nowSelEmpIndex: -1,//当前选择的员工的索引
            alertMsg: "",//显示的消息
            showAlert: false,//是否显示消息提示弹窗
            storeId: "",//店铺id
            tableNo: -1,//座位号
            showRatingSuc: false,//是否显示评论员工成功弹窗
            showRank: "emp",//首页显示排行榜，默认员工
            showMoreDesc: false,
            showBigAvatar: false,
            nowBigAvatar: "",
            showTipALert: true,
        };
        this.confirmRating = this.confirmRating.bind(this);
        this.uploadEmpReview = this.uploadEmpReview.bind(this);
        this.callEmp = this.callEmp.bind(this);
        this.getGiftsData = this.getGiftsData.bind(this);
        this.doShowAlert = this.doShowAlert.bind(this);
        this.changeNowSelEmp = this.changeNowSelEmp.bind(this);
        this.topWindow = this.topWindow.bind(this);
        this.refreshWindow = this.refreshWindow.bind(this);
        this.callThisEmp = this.callThisEmp.bind(this);
    }
    render() {
        console.log(this.props);
        // 员工列表数组
        let emps = [];
        // 当前在线员工数
        // let empCount = 0;
        // 店铺logo
        let logo = "";
        let storeQrCode = "";
        let reward = "";
        let rewardRanks = [];
        let empRanks = [];
        // 店铺简介
        // 店铺名字
        let storeName = "";
        let storeDesc = "";
        let hotTitle = "";
        let rollNotice = "";
        let rollTitle = "打赏排名";
        let hotGoodsData = [];
        if (this.props.indexData) {
            // empCount = this.props.indexData.empCount;
            emps = this.props.indexData.emps;
            reward = this.props.indexData.reward
            logo = this.props.indexData.logo;
            // summary = this.props.indexData.summary;
            storeName = this.props.indexData.storeName;
            rewardRanks = this.props.indexData.rewardRanks ? this.props.indexData.rewardRanks : [];
            empRanks = this.props.indexData.empRanks ? this.props.indexData.empRanks : [];
            storeDesc = this.props.indexData.summary ? this.props.indexData.summary : "";
            hotTitle = this.props.indexData.title ? this.props.indexData.title : "近期热销";
            rollNotice = this.props.indexData.notice;
            rollTitle = this.props.indexData.netTitle ? this.props.indexData.netTitle : "打赏排名";
            storeQrCode = this.props.indexData.qrCode;
        }
        if (this.props.hotGoodsData.length) {
            hotGoodsData = this.props.hotGoodsData;
        }
        console.log(hotGoodsData)
        console.log(this.props.hotGoodsData)
        let { doShowRatingStore, doShowEmpDetail, nowSelEmp, alertMsg, showAlert, showRatingSuc, showRank, showMoreDesc, showBigAvatar, nowBigAvatar, showTipALert } = this.state;
        // // 排序
        let tmpEmps = emps;
        let canCall = emps.filter((val) => {
            if (val.reward && val.work) {
                return true;
            }
            return false;
        })
        canCall.sort(function (a, b) { return a.random - b.random });
        let notCanCall = emps.filter((val) => {
            if (val.reward && val.work) {
                return false;
            }
            return true;
        })
        console.log(notCanCall);
        let shuffle = (arr) => {
            return arr;
            var len = arr.length;
            for (var i = 0; i < len - 1; i++) {
                var index = parseInt(Math.random() * (len - i));
                var temp = arr[index];
                arr[index] = arr[len - i - 1];
                arr[len - i - 1] = temp;
            }
            return arr;
        }
        tmpEmps = shuffle(canCall);
        console.log(tmpEmps);
        emps = tmpEmps.concat(notCanCall);
        // // 排序end
        // 重组emps
        let newEmps = [];
        for (let i = 0; i < emps.length; i += 5) {
            newEmps.push(emps.slice(i, i + 5));
        }
        let newHotGoodsData = [];
        for (let i = 0; i < hotGoodsData.length; i += 5) {
            newHotGoodsData.push(hotGoodsData.slice(i, i + 5));
        }
        console.log("kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk")
        console.log(newHotGoodsData);
        //重组end 
        return (
            <div className="index">
                {/* <div className="top-cont">
                    <div className="store-name-tit">{storeName}| 全心全意为您服务</div>
                    <div className="store-rating">
                        <div className="store-name">{storeName}</div>
                        <button onClick={() => this.setState({ doShowRatingStore: true })}>网吧点评</button>
                    </div>
                </div> */}
                <div className="left-cont">
                    <div className="left-mask"></div>
                    <div className="left-info">
                        <div className="store-info">
                            <div className="logo">
                                <img src={logo} alt="" />
                            </div>
                            <div className="store-name">{storeName}</div>
                            <div className="store-desc">
                                {storeDesc.length > 45 ? storeDesc.substring(0, 25) + "..." : storeDesc}
                                {
                                    storeDesc.length > 45 ? (
                                        <span className="more" onClick={() => this.setState({ showMoreDesc: true })}>查看更多</span>
                                    ) : ("")
                                }
                            </div>

                            <button onClick={() => this.setState({ doShowRatingStore: true })}>网吧点评</button>
                        </div>
                        <div className="paihang">
                            <div className="ph-icon">
                                <img src={require("./../../static/images/phb_icon.png")} alt="" />
                            </div>
                            <div className="change-ph">
                                <span className={showRank === 'emp' ? 'active' : ''} onClick={() => this.setState({ showRank: "emp" })}>员工</span>
                                <span className={showRank === 'reward' ? 'active' : ''} onClick={() => this.setState({ showRank: "reward" })}>打赏</span>
                            </div>
                            <div className="ph-list">
                                {
                                    showRank === "emp" ? (
                                        <div className="list-cont emp">
                                            <ul>
                                                {
                                                    empRanks.map((item, index) => {
                                                        return (
                                                            <li key={index}>
                                                                <div className="cup-icon">
                                                                    {
                                                                        index > 2 ? (
                                                                            <span className="cup-no">{index + 1}</span>
                                                                        ) : (
                                                                                <img src={
                                                                                    index === 0 ? require("./../../static/images/champion.png") :
                                                                                        (index === 1 ? require("./../../static/images/yajun.png") :
                                                                                            require("./../../static/images/jijun.png")
                                                                                        )
                                                                                } alt="" />
                                                                            )
                                                                    }
                                                                </div>
                                                                <div className="ph-item-info">
                                                                    <div className="ph-item-name">{item.name}</div>
                                                                    <div className="ph-item-desc">
                                                                        被呼叫数：{item.count}次；服务评分：{Number(item.appraise).toFixed(1)}星
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        )
                                                    })
                                                }
                                            </ul>
                                        </div>
                                    ) : (
                                            <div className="list-cont reward">
                                                <ul>
                                                    {
                                                        rewardRanks.map((item, index) => {
                                                            return (
                                                                <li key={index}>
                                                                    <div className="cup-icon">
                                                                        {
                                                                            index > 2 ? (
                                                                                <span className="cup-no">{index + 1}</span>
                                                                            ) : (
                                                                                    <img src={
                                                                                        index === 0 ? require("./../../static/images/champion.png") :
                                                                                            (index === 1 ? require("./../../static/images/yajun.png") :
                                                                                                require("./../../static/images/jijun.png")
                                                                                            )
                                                                                    } alt="" />
                                                                                )
                                                                        }
                                                                    </div>
                                                                    <div className="ph-item-info">
                                                                        <div className="ph-item-name">{item.memberName}</div>
                                                                        <div className="ph-item-desc">
                                                                            打赏次数：{item.count}次；打赏金额：{Number(item.amount).toFixed(2)}元
                                                                </div>
                                                                    </div>
                                                                </li>
                                                            )
                                                        })
                                                    }
                                                </ul>
                                            </div>
                                        )
                                }
                            </div>
                        </div>
                    </div>
                </div>
                {/* <div className="bot-cont">
                    <div className="bot-emp">
                        <div className="emp-list">
                            <ul>
                                {
                                    emps.map((item, index) => {
                                        return (
                                            <li className="item" key={index}>
                                                <div className="item-inner-wrap" onClick={() => this.setState({ nowSelEmp: item, nowSelEmpIndex: index, doShowEmpDetail: true })}>
                                                    <div className="emp-avatar">
                                                        <img src={item.empPhoto ? item.empPhoto : require("./../../static/images/defaultAvatar.png")} alt="" />
                                                    </div>
                                                    <p className="emp-name">{item.empName} | <b>{item.empJob ? item.empJob : ""}</b></p>
                                                    <div className={item.work ? "online" : "online not-online"}>
                                                        <span>{item.work ? "在线" : "离线"}</span>
                                                    </div>
                                                </div>
                                            </li>
                                        );
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                </div> */}
                <div className="right-cont">
                    <div className="right-top">
                        {
                            rollTitle === "打赏排名" ? (
                                <React.Fragment>
                                    <div className="top-tit">{rollTitle}</div>
                                    <div className="top-alert">
                                        {/* <marquee direction="left" className="mar-quee">
                                            {
                                                rewardRanks.length > 10 ? (
                                                    rewardRanks.slice(0, 10).map((item, index) => {
                                                        return (
                                                            <React.Fragment key={index}>
                                                                <span className="index">第{index + 1}名：</span>
                                                                <span className="name">{item.memberName}；</span>
                                                            </React.Fragment>
                                                        )
                                                    })
                                                ) : (
                                                        rewardRanks.map((item, index) => {
                                                            return (
                                                                <React.Fragment key={index}>
                                                                    <span className="index">第{index + 1}名：</span>
                                                                    <span className="name">{item.memberName}；</span>
                                                                </React.Fragment>
                                                            )
                                                        })
                                                    )
                                            }
                                        </marquee> */}
                                    </div>
                                </React.Fragment>
                            ) : (
                                    <React.Fragment>
                                        <div className="top-tit">{rollTitle}</div>
                                        <div className="top-alert">
                                            <marquee direction="left" className="mar-quee">
                                                {rollNotice}
                                            </marquee>
                                        </div>
                                    </React.Fragment>
                                )
                        }

                    </div>
                    <div className="bot-cont">
                        <div className="bot-emp">
                            <div className="bot-tit">
                                <div className="bot-tit-info">
                                    <span className="tit-name">在线呼叫打赏</span>
                                    <div className="bot-tit-line">
                                        <span className="line"></span>
                                    </div>
                                </div>
                            </div>
                            <div className="emp-list-wrap" id="empwrap">
                                <Carousel autoplay={false} ref={dom =>this.empwrap = dom} autoplaySpeed={4000} speed={1000} draggable={true} dotPosition={'bottom'}>
                                    {
                                        newEmps.map((empsItem, empsIndex) => {
                                            return (
                                                <div className="emp-list" key={empsIndex}>
                                                    <ul>
                                                        {
                                                            empsItem.map((item, index) => {
                                                                return (
                                                                    <li className="item swiper-slide" key={index}>
                                                                        <div className="item-inner-wrap" >
                                                                            <div className="emp-avatar" onClick={() => this.setState({ showBigAvatar: true, nowBigAvatar: item.empPhoto })}>
                                                                                <img src={item.empPhoto ? item.empPhoto : require("./../../static/images/defaultAvatar.png")} alt="" />
                                                                            </div>
                                                                            <p className="emp-name">{item.empName}</p>
                                                                            <div className="line-wrap">
                                                                                <span className="line"></span>
                                                                            </div>
                                                                            <p className="emp-job">{item.empJob ? item.empJob : "---"}</p>
                                                                            <div className="btn">
                                                                                <span className="ds" onClick={() => this.setState({ nowSelEmp: item, nowSelEmpIndex: index, doShowEmpDetail: true })}>打赏/点评</span>
                                                                                {
                                                                                    item.reward ? (
                                                                                        item.work ? (
                                                                                            <span className="hujiao" onClick={(e) => this.callThisEmp(e, item, index)}>呼叫</span>
                                                                                        ) : (
                                                                                                <span className="lixian">离线</span>
                                                                                            )
                                                                                    ) : (
                                                                                        item.work?(<span className="hujiao">在线</span>):(<span className="lixian">离线</span>)
                                                                                    )
                                                                                }

                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                );
                                                            })
                                                        }
                                                    </ul>
                                                </div>
                                            )
                                        })
                                    }
                                </Carousel>
                                {/* {
                                    showTipALert&&newEmps.length>1?(
                                        <div className="tip-arrow">
                                            <span className="tip-info">右边还有更多哟~~~</span>
                                            <i className="iconfont iconjiantou"></i>
                                        </div>
                                    ):("")
                                } */}

                            </div>
                        </div>
                        <div className="bot-hot">
                            <div className="bot-tit">
                                <div className="bot-tit-info">
                                    <span className="tit-name">{hotTitle ? hotTitle : "近期热销"}</span>
                                    <div className="bot-tit-line">
                                        <span className="line"></span>
                                    </div>
                                </div>
                            </div>
                            <div className="hot-list-wrap" id="hotwrap">
                                <Carousel autoplay={false} ref={dom =>this.hotwrap = dom} autoplaySpeed={4000} speed={1000} draggable={true} dotPosition={'bottom'}>
                                    {
                                        newHotGoodsData.map((hotItems, hotIndex) => {
                                            return (
                                                <div className="hot-list" key={hotIndex}>
                                                    <ul>
                                                        {
                                                            hotItems.length > 0 ? (
                                                                hotItems.map((item, index) => {
                                                                    return (
                                                                        <li className="hot-item" key={index}>
                                                                            <div className="hot-item-img" onClick={() => this.setState({ showBigAvatar: true, nowBigAvatar: item.image })}>
                                                                                <img src={item.image+'?x-oss-process=image/resize,l_300'} alt="" />
                                                                            </div>
                                                                            <div className="hot-item-desc">
                                                                                <p className="item-name">{item.productName}</p>
                                                                                <div className="line-wrap">
                                                                                    <div className="line"></div>
                                                                                </div>
                                                                                <p className="item-price">
                                                                                    ￥{item.price}
                                                                                    {
                                                                                        item.count > 0 ? (
                                                                                            <span className="hot-goods-count">(已售:{item.count}份)</span>
                                                                                        ) : ("")
                                                                                    }
                                                                                </p>

                                                                            </div>
                                                                        </li>
                                                                    )
                                                                })
                                                            ) : (<li className="no-info"></li>)
                                                        }
                                                    </ul>
                                                </div>
                                            )
                                        })
                                    }
                                </Carousel>
                            </div>
                        </div>
                    </div>
                </div>
                {
                    /* 评价网吧弹窗 */
                    doShowRatingStore ? (<RatingStore
                        logo={logo}
                        hide={() => { this.setState({ doShowRatingStore: false }) }}
                        confirm={(grade, textVal) => this.confirmRating(grade, textVal)} />) : ("")
                }
                {
                    // 员工详细信息弹窗
                    doShowEmpDetail ? (
                        <EmpDetail
                            reward={reward}
                            nowSelEmp={nowSelEmp}
                            hide={() => this.setState({ doShowEmpDetail: false })}
                            uploadEmpReview={(grade, message, avatar) => this.uploadEmpReview(grade, message, avatar)}
                            callEmp={() => this.callEmp()}
                            getGifts={() => this.getGiftsData()}
                            giftsData={this.props.giftsData}
                            storeId={this.state.storeId}
                            tableNo={this.state.tableNo}
                            changeNowSelEmp={(type) => this.changeNowSelEmp(type)}
                            doShowAlert={(msg) => this.doShowAlert(msg)}
                            showRatingSuc={showRatingSuc}
                            setHideRatingSuc={() => this.setState({ showRatingSuc: false })}
                        />
                    ) : ("")
                }
                {
                    showAlert ? (
                        <div className="alert-msg">
                            <div className="alert-wrap">
                                <div className="alert-laba"></div>
                                <div className="alert-msg-info"><span>{alertMsg}</span></div>
                            </div>
                        </div>
                    ) : ("")
                }
                <div className="refresh-top">
                    {
                        emps.length > 8 ? (
                            <span className="iconfont icon-zhiding" onClick={() => this.topWindow()}></span>
                        ) : ("")
                    }
                    <span className="iconfont icon-shuaxin" onClick={() => this.refreshWindow()}></span>
                </div>
                <div className="right-nav">
                    <div className="icon-wrap">
                        <div className="nav-icon">
                            <img src={require("./../../static/images/concat.png")} alt="" />
                            <div className="store-qr-code">
                                <span className="tit">联系我们</span>
                                {
                                    storeQrCode ? (
                                        <img src={storeQrCode} alt="" />
                                    ) : (
                                            <p>暂无信息...</p>
                                        )
                                }
                            </div>
                        </div>
                        <div className="nav-icon" onClick={() => this.setState({ doShowRatingStore: true })}>
                            <img src={require("./../../static/images/review.png")} alt="" />
                        </div>
                    </div>
                </div>
                {
                    showMoreDesc ? (
                        <div className="store-desc-more" onClick={(e) => { this.setState({ showMoreDesc: false }); e.stopPropagation() }}>
                            <div className="store-desc-more-wrap">
                                {storeDesc}
                            </div>
                        </div>
                    ) : ("")
                }
                {
                    showBigAvatar ? (
                        <div className="big-avatar" onClick={(e) => { this.setState({ showBigAvatar: false }); e.stopPropagation() }}>
                            <div className="big-avatar-wrap">
                                <img src={nowBigAvatar ? nowBigAvatar : require("./../../static/images/defaultAvatar.png")} alt="" />
                            </div>
                        </div>
                    ) : ("")
                }
            </div>
        );
    }

    // 给网吧评分
    async confirmRating(grade, textVal) {
        console.log(grade);
        let netService, healthConditions, airQuality, comfort, equipment, netFluency;
        let { storeId, tableNo } = this.state;
        let storeName = this.props.indexData.storeName;
        for (let i = 0; i < grade.length; i++) {
            switch (grade[i].englishName) {
                case "netService":
                    netService = grade[i].star;
                    break;
                case "healthConditions":
                    healthConditions = grade[i].star;
                    break;
                case "airQuality":
                    airQuality = grade[i].star;
                    break;
                case "comfort":
                    comfort = grade[i].star;
                    break;
                case "equipment":
                    equipment = grade[i].star;
                    break;
                case "netFluency":
                    netFluency = grade[i].star;
                    break;
                default:
                    break;
            }
        }
        await this.props.ratingStore(netService, healthConditions, airQuality, comfort, equipment, netFluency, textVal, storeId, tableNo, storeName);
        if (this.props.msgData.code == 1) {
            this.doShowAlert(this.props.msgData.msg);
            this.setState({
                doShowRatingStore: false
            });
        }
    }
    refreshWindow() {
        window.location.reload(true);
    }
    topWindow() {
        $(".emp-list-wrap").animate({ scrollTop: 0 }, 500);
        $(".hot-list-wrap").animate({ scrollTop: 0 }, 500);
    }
    // 呼叫服务员
    async callThisEmp(e, item, index) {
        e.stopPropagation();
        console.log(item)
        await this.setState({ nowSelEmp: item, nowSelEmpIndex: index });
        await this.callEmp();
        // 显示评论服务员窗口，点击完成评论完成呼叫
        // this.setState({
        //     showReview: true
        // });
    }
    // 给员工打分
    async uploadEmpReview(grade, message, avatar) {
        let { nowSelEmp, storeId, tableNo } = this.state;
        await this.props.ratingEmp(nowSelEmp.empId, nowSelEmp.empName, grade, storeId, tableNo, message);
        // 先判断当前是否有呼叫员工，有呼叫的话nowCallEmpData的id不为-1
        if (this.props.nowCallEmpData.id !== -1) {
            await this.props.callEmpFinish(this.props.nowCallEmpData.id);
        }
        // 如果用户刷新界面，那就获取sessionStorage中的当前所呼叫员工信息，来进行完成呼叫（ps：如果有的话）
        if (sessionStorage.getItem("nowCallEmp")) {
            let nowCallEmp = JSON.parse(sessionStorage.getItem("nowCallEmp"));
            if (nowCallEmp.id !== -1) {
                await this.props.callEmpFinish(nowCallEmp.id);
            }
        }
        if (this.props.msgData.code == 1) {
            this.doShowAlert("感谢您的评价");
            // this.setState({
            //     showRatingSuc: true
            // })
        }
    }
    // 呼叫员工
    async callEmp() {
        let { nowSelEmp, storeId, tableNo } = this.state;
        await this.props.callEmp(nowSelEmp.empId, nowSelEmp.empName, storeId, tableNo);
        if (this.props.msgData.code == 1) {
            this.doShowAlert(this.props.msgData.msg);
        } else {
            this.doShowAlert(this.props.msgData.msg);
        }
    }
    //获取商品数据
    async getGiftsData() {
        await this.props.getGifts();
    }
    // 显示alert
    doShowAlert(msg) {
        this.setState({
            showAlert: true,
            alertMsg: msg
        });
        clearTimeout(this.timerForAlert);
        this.timerForAlert = setTimeout(() => {
            this.setState({
                showAlert: false,
                alertMsg: ""
            });
            clearTimeout(this.timerForAlert);
        }, 9900);
    }
    // 改变当前所选择的服务员
    changeNowSelEmp(type) {
        let { nowSelEmpIndex } = this.state;
        console.log(nowSelEmpIndex)
        let emps = [];
        if (this.props.indexData) {
            emps = this.props.indexData.emps;
        }
        if (type === "left") {
            if (nowSelEmpIndex <= 0) {
                return;
            } else {
                nowSelEmpIndex--;
                this.setState({
                    nowSelEmp: emps[nowSelEmpIndex],
                    nowSelEmpIndex
                });
            }
        } else {
            if (nowSelEmpIndex >= emps.length - 1) {
                return;
            } else {
                nowSelEmpIndex++;
                this.setState({
                    nowSelEmp: emps[nowSelEmpIndex],
                    nowSelEmpIndex
                });
            }
        }
    }
    componentDidMount() {
        $("#empwrap").on("mousewheel",(event)=>{
            let delta = event.originalEvent.wheelDelta;
            if (delta > 0) {
                //鼠标向上滚
                this.empwrap.prev();
            } else {
                //鼠标向下滚
                this.empwrap.next();
            }
        })
        $("#hotwrap").on("mousewheel",(event)=>{
            let delta = event.originalEvent.wheelDelta;
            if (delta > 0) {
                //鼠标向上滚
                this.hotwrap.prev();
            } else {
                //鼠标向下滚
                this.hotwrap.next();
            }
        })
        try {
            let searchStr = window.location.search.split('?')[1];
            let searchArr = searchStr.split('&');
            let searchObj = {};
            for (var i = 0; i < searchArr.length; i++) {
                var curParam = searchArr[i].split('=');
                searchObj[curParam[0]] = curParam[1];
            }
            this.setState({
                storeId: searchObj.storeId,
                tableNo: decodeURI(searchObj.tableNo)
            });

            this.props.getIndexData(searchObj.storeId);
            this.props.getHotData(searchObj.storeId, 0, 1000);
        } catch (error) {
            console.log(error);
        }
        setTimeout(() => {
            this.setState({
                showTipALert: false
            })
        }, 5000)
    }
    componentDidUpdate() {
        $(".emp-list ul").each(function (index, element) {
            element.onwheel = function (event) {
                var table = $(element).parents(".emp-list-wrap");
                var right = $(element).width() - table[0].offsetWidth;
                if (table.scrollLeft() < right && event.deltaY > 0) {
                    //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
                    event.preventDefault();
                    var left = (table.scrollLeft() + 50);
                    table.scrollLeft(left)
                }
                if (table.scrollLeft() > 0 && event.deltaY < 0) {
                    //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
                    event.preventDefault();
                    var left = (table.scrollLeft() - 50);
                    table.scrollLeft(left)
                }
            }
        })
        $(".hot-list ul").each(function (index, element) {
            element.onwheel = function (event) {
                var table = $(element).parents(".hot-list-wrap");
                var right = $(element).width() - table[0].offsetWidth;
                if (table.scrollLeft() < right && event.deltaY > 0) {
                    //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
                    event.preventDefault();
                    var left = (table.scrollLeft() + 50);
                    table.scrollLeft(left)
                }
                if (table.scrollLeft() > 0 && event.deltaY < 0) {
                    //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
                    event.preventDefault();
                    var left = (table.scrollLeft() - 50);
                    table.scrollLeft(left)
                }
            }
        })
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }
}

export default connect(
    state => ({ indexData: state.indexData, msgData: state.msgData, nowCallEmpData: state.nowCallEmpData, giftsData: state.giftsData, hotGoodsData: state.hotGoodsData }),
    { getIndexData, ratingStore, ratingEmp, callEmp, callEmpFinish, getGifts, getHotData }
)(Index);